<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>果知南</title>
    <link rel="stylesheet" href="../styles/bootstrap.css" />
    <link rel="stylesheet" href="../styles/main.css" />
  </head>
  <body>
    <div class="navbar navbar-expand-sm pt-0 pb-0 bg-light mb-4">
      <div class="container">
        <div class="navbar-brand d-block d-md-none pt-0 pb-0 fl">
          <a href="../pages/index.html">
            <img src="../images/logo.png" alt="" />
          </a>
        </div>
        <label id="menu" class="d-block d-sm-none" for="toggle-list">menu</label>
        <input id="toggle-list" class="d-none" type="checkbox" />
        <div class="d-none d-sm-block w-100">
          <ul class="navbar-nav fl">
            <li class="navbar-item active"><a href="./index.html" class="navbar-link">首页</a></li>
          </ul>
          <ul class="navbar-nav fr">
            <li class="navbar-item"><a href="#" class="navbar-link">我的订单</a></li>
            <li class="navbar-item"><a href="#" class="navbar-link">收藏夹</a></li>
            <li class="navbar-item"><a href="./login.html" class="navbar-link">登录</a></li>
            <li class="navbar-item"><a href="./regist.html" class="navbar-link">注册</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row d-none d-md-flex mb-4">
        <div class="col-md-2 pl-0">
          <img src="../images/logo.png" alt="" />
        </div>
        <div class="col-md-7 pl-0 mt-auto mb-auto">
          <input class="form-control form-control-lg" type="text" /><button class="btn btn-lg btn-danger pl-0 pr-0">搜一搜</button>
        </div>
        <div class="col-md-3 pl-0 mt-auto mb-auto">
          <div class="card bg-light">
            <div class="card-header">
              <img class="cart" src="../images/购物车.png" />我的购物车
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="list-group d-none d-xl-block pl-0 pr-0 mb-4 col-xl-2">
          <a href="#" class="list-group-item">item</a>
          <a href="#" class="list-group-item">item</a>
          <a href="#" class="list-group-item">item</a>
          <a href="#" class="list-group-item">item</a>
          <a href="#" class="list-group-item">item</a>
          <a href="#" class="list-group-item">item</a>
          <a href="#" class="list-group-item">item</a>
          <a href="#" class="list-group-item">item</a>
          <a href="#" class="list-group-item">item</a>
        </div>
        <div id="wrap" class="d-none d-md-block col-xl-7 pl-0 pr-0 mb-4">
          <div class="picture">
            <img id="slideshow" style="left:0" src="../images/slideshow.png" alt="" />
          </div>
          <div id="press">
            <button class="btn active"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
          </div>
        </div>
        <div class="card d-none d-xl-block col-xl-3 pl-0 pr-0 mb-4 bg-light">
          <div class="card-body">
            <div class="row m-0">
              <div class="avator col-xs-6 pl-0 pr-0">
              </div>
              <div class="welcome col-xs-6 pl-0 pr-0">
                你好 请先登录
              </div>
            </div>
            <div class="login">
              <button class="btn">登录</button>
              <button class="btn">注册</button>
            </div>
            <div class="text">
              你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临
              你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临
              你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临
              你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临
              你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临
              你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临 你好欢迎光临
              你好欢迎光临 你好欢迎光临 你好欢迎光临
            </div>
          </div>
        </div>
      </div>
      <div id="app">
        <btn></btn>
        <item></item>
      </div>
    </div>
    <div class="footer bg-light">
      <div class="messages">
        <a href="#">联系我们</a>
        <a href="#">招聘信息</a>
        <a href="#">商家入驻</a>
        <a href="#">商家后台</a>
      </div>
      <div class="details">
        营业执照注册号：330106000004 |
        网络文化经营许可证：浙网文（2016）0349-21号 |
        增值电信业务经营许可证：B2-2011049 |
        安全责任书 |
        浙公网安备 33010602009号
      </div>
    </div>
    <div class="sidebar d-none d-xl-block">
      <div id="signs">
        <img class="sign" src="../images/我的资产.png" alt="" />
        <img class="sign" src="../images/我的收藏.png" alt="" />
        <img class="sign" src="../images/我看过的.png" alt="" />
        <img class="sign" src="../images/我要充值.png" alt="" />
      </div>
    </div>
    <div id="tags" style="right:60px" class="d-none d-xl-block">
      <img class="tag" style="visibility:hidden" src="../images/资产.png" alt="" />
      <img class="tag" style="visibility:hidden" src="../images/收藏.png" alt="" />
      <img class="tag" style="visibility:hidden" src="../images/看过.png" alt="" />
      <img class="tag" style="visibility:hidden" src="../images/充值.png" alt="" />
    </div>
    <template id="btn_component">
      <div id="toggle_item">
        <img @click="toggle_item" :src="src" />
        <span id="toggle_text">{{text}}</span>
      </div>
    </template>
    <template id="item_component">
      <div v-if="show" class="cart-promote mb-4">
        <div class="symbol">
        </div>
        <div class="text">
          item
        </div>
        <div class="row m-0 mt-4">
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
        </div>
        <div class="symbol">
        </div>
        <div class="text">
          item
        </div>
        <div class="row m-0 mt-4">
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
        </div>
        <div class="symbol">
        </div>
        <div class="text">
          item
        </div>
        <div class="row m-0 mt-4">
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
        </div>
        <div class="symbol">
        </div>
        <div class="text">
          item
        </div>
        <div class="row m-0 mt-4">
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
          <div class="col-lg-3 pl-0 pr-0 mb-4">
            <div class="picture bg-light">
            </div>
          </div>
        </div>
      </div>
    </template>
    <script src="../lib/vue.js"></script>
    <script src="../scripts/slideshow.js"></script>
    <script src="../scripts/sidehover.js"></script>
    <script src="../scripts/toggleBtn.js"></script>
  </body>
</html>
